<template>
  <PageWrapper contentFullHeight fixedHeight contentClass="main-box">
    <CommonDateSearch ref="searchRef" @search="handleSearch"></CommonDateSearch>
    <div class="content-box">
      <div class="chart-box" v-for="item in typeList" :key="item.dictCode">
        <Line class="chart" :loading="item.loading" :chartData="item.chartData" :title="item.itemName" />
      </div>
    </div>
  </PageWrapper>
</template>

<script setup>
import Line from '@/components/Charts/Line/index.vue'
import { ref, onMounted, reactive } from 'vue'
import { PageWrapper } from '@/components/Page'
import { getChartListData, getChartChildDivListData, getChildDataCostDiv } from '@/api/common/chart'
import CommonDateSearch from '@/components/CommonDateSearch/index.vue'
import { getEleThisData } from '@/api/power/electricity/electricity.ts'
import { getDictList, getDictListByCode } from '@/api/sys/dict'
defineOptions({ name: 'AnnualAndSigle' })

const searchRef = ref()
const searchInfo = reactive({})
const typeList = ref([])
const chartList = ref([])
const dictCode = 'annual_electricity_consumption_and_unit_consumption'

onMounted(async () => {
  await getTypeList()
  searchRef.value.handleSearch()
})
const handleSearch = (params) => {
  console.log('searchInfo---------', searchInfo)
  console.log('params---------', params)
  Object.assign(searchInfo, params)
  getChartData()
}
const getTypeList = async () => {
  const res = await getDictListByCode(dictCode)
  typeList.value = res.map((item) => ({
    ...item,
    loading: true,
    chartData: {
      xaxisList: [],
      yaxisList: [],
    },
  }))
}

const getChartData = () => {

  typeList.value.forEach((item, index) => {
    item.loading = true
    let api
    if (item.itemName.indexOf('产品电量单耗') > -1) {
      api = getChartChildDivListData
    } else if (item.itemName.indexOf('产品费用单耗') > -1 ) {
      api = getChildDataCostDiv
    } else {
      api =  getEleThisData
    }
    api({
      ...searchInfo,
      dictCode,
      itemName: item.itemName,
    })
      .then((res) => {
        item.chartData = res
      })
      .catch((err) => {
        if (err) {
          console.log('获取年度用量及单耗失败')
        }
      })
      .finally((info) => {
        item.loading = false
      })
  })
  console.log('typeList.value-----', typeList.value);
}

</script>

<style scoped lang="scss">
.content-box {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  padding: 4px;
  overflow: auto;
  background: #fff;

  .chart-box {
    flex-shrink: 0;
    width: calc(100% / 2);
    height: 50%;
    min-height: 240px;
    padding: 4px;
  }
}
</style>
